<template>
	<view class="body-view">
		<!-- 使用scroll-view实现tabs滑动切换 --> 
		<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
			<view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index" @click="swichMenu(item.id)">
				<view :class="currentTab==(item.id) ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{item.name}}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 列表数据跟随tab切换而切换 -->
		<!-- //重点实验室 -->
	    <scroll-view scroll-y="true" class="scroll-view-height list-content" :style="'width:100%;height:100%'" enable-flex  @scrolltolower="scrollToLower">
		    <view class="list-item" v-for="(item,index) in swiperDateList" 
		        :key="index">A-list {{index}}</view>
		</scroll-view>
	</view>
</template>

<script>
	
	import * as env from '@/utils/env.js'
	import orderTabBar from '@/wxcomponents/tab_bar.vue';
	import { listStpzdsys } from "@/api/innovate/stpzdsys"; //重点实验室
	import { listStpzckj } from "@/api/innovate/stpzckj"; //众创空间
	import { listStpxctd } from "@/api/innovate/stpxctd"; //星创天地
	import { listStpkjyq } from "@/api/innovate/stpkjyq"; //科技园区
	import { listStpgcjsyjzx } from "@/api/innovate/stpgcjsyjzx"; //工程技术研究中心
	import { listStpfhq } from "@/api/innovate/stpfhq"; //孵化器
	import { listStpcxtd } from "@/api/innovate/stpcxtd"; //创新团队
	
	
	export default {
		components: {
				orderTabBar,
		},
		data() {
			return {
				scrollH: 200,
				// 当前选择tab项
				currentIndex: 0,
				// 当前查询状态
				currentStatus: '',
				tabs: [{
						id: 0,
						name: '重点实验室',
						code:'Zdsys'
					},
					{
						id: 1,
						name: '科技园区',
						code:'Kjyq'
					},
					{
						id: 2,
						name: '孵化器',
						code:'Fhq'
					},
					{
						id: 3,
						name: '星创天地',
						code:'Xctd'
					},
					{
						id: 4,
						name: '工程技术中心',
						code:'Gcjsyjzx'
					},
					{
						id: 5,
						name: '众创空间',
						code:'Zckj'
					},
					{
						id: 6,
						name: '创新团队',
						code:'Cxtd'
					},
				],
				tabList: [{
						status: '0',
						title: '重点实验室',
						code:'Zdsys'
					},
					{
						status: '1',
						title: '科技园区',
						code:'Kjyq'
					},
					{
						status: '2',
						title: '孵化器',
						code:'Fhq'
					},
					{
						status: '3',
						title: '星创天地',
						code:'Xctd'
					},
					{
						status: '4',
						title: '工程技术中心',
						code:'Gcjsyjzx'
					},
					{
						status: '5',
						title: '众创空间',
						code:'Zckj'
					},
					{
						status: '6',
						title: '创新团队',
						code:'Cxtd'
					},
				],
				currentTab: 0,
				tabCurrent: 'tabNum0',
				// Tab切换内容
				swiperDateList: [],
			}
		},
		onLoad() {
			this.getMyReportData()
		},
		methods: {
			onChangeTab(e) {
			    this.currentTab = id
			    this.tabCurrent = 'tabNum'+ id
			    this.swiperDateList = []
			    this.getMyReportData()
			},
			swichMenu(id) {
				this.currentTab = id
				this.tabCurrent = 'tabNum'+ id
				this.swiperDateList = []
				this.getMyReportData()
			},
			swiperChange(e) {
				let index = e.detail.current
				this.swichMenu(index)
			},
			getMyReportData(){
				var that = this
				switch (that.currentTab){
					case 0 :
						listStpzdsys().then((res)=>{
							res.rows.forEach(v => {
								v.pictureUrl = env.imgUrl + v.pictureUrl
								that.swiperDateList.push(v)
							})
							console.log(that.swiperDateList)
							if(that.swiperDateList.length == 0){
								
								that.noData = true
								
							}
						})
						break
					case 1 :
						listStpkjyq().then((res)=>{
							res.rows.forEach(v => {
								v.pictureUrl = env.imgUrl + v.pictureUrl
								that.swiperDateList.push(v)
							})
						})
						break
					case 2 :
						listStpzdsys().then((res)=>{
							res.rows.forEach(v => {
								v.pictureUrl = env.imgUrl + v.pictureUrl
								that.swiperDateList.push(v)
							})
						})
						break
					case 3 :
						listStpzdsys().then((res)=>{
							res.rows.forEach(v => {
								v.pictureUrl = env.imgUrl + v.pictureUrl
								that.swiperDateList.push(v)
							})
						})
						break
					case 4 :
						listStpgcjsyjzx().then((res)=>{
							res.rows.forEach(v => {
								v.pictureUrl = env.imgUrl + v.pictureUrl
								that.swiperDateList.push(v)
							})
						})
						break
					case 5 :
						listStpzckj().then((res)=>{
							res.rows.forEach(v => {
								v.pictureUrl = env.imgUrl + v.pictureUrl
								that.swiperDateList.push(v)
							})
						})
						break
					case 6 :
						
						listStpcxtd().then((res)=>{
							res.rows.forEach(v => {
								v.pictureUrl = env.imgUrl + v.pictureUrl
								that.swiperDateList.push(v)
							})
						})
						break
				}
			},
			 // 加载更多
			loadmore(index) {
				// 拿到当前的列表
				let item = this.newsList[index]
				// 判断是否处于可加载状态(上拉加载更多)
				if (item.loadmore !== "上拉加载更多") {
					return
				}
						 
						 
				// 修改当前列表加载状态
				item.loadmore = '加载中...'
				// 模拟数据请求
				setTimeout(() => {
					// 加载数据
					item.list = [...item.list, ...item.list]
					// 恢复加载状态
					item.loadmore = '上拉加载更多'
				}, 3000)
			},     
		}
	}
</script>

<style scoped lang="scss">
	.tab-bar {
		width: 93%;
		border-radius: 15rpx;
	}
	
	.body-view {
		height: 100vh;
		width: 100%;
		display: flex;
		background-color: #e0e0e0;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		align-items: flex-start;
		justify-content: center;
	}

	.top-menu-view {
		display: flex;
		position: fixed;
		top: 0rpx;
		left: 0;
		white-space: nowrap;
		width: 100%;
		background-color: #FFFFFF;
		height: 86rpx;
		line-height: 86rpx;
		border-top: 1rpx solid #d8dbe6;

		.menu-topic-view {
			display: inline-block;
			white-space: nowrap;
			height: 86rpx;
			position: relative;

			.menu-topic-text {
				font-size: 30rpx;
				color: #303133;
				padding: 10rpx 40rpx;
			}

			// .menu-topic-act {
			// 	margin-left: 30upx;
			// 	margin-right: 10upx;
			// 	position: relative;
			// 	height: 100%;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// }

			.menu-topic-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;

				.menu-topic-bottom-color {
					width: 100rpx;
					height: 4rpx;
				}
			}

			.menu-topic-act .menu-topic-bottom {
				display: flex;
				justify-content: center;
			}

			.menu-topic-act .menu-topic-bottom-color {
				background: #016fb8;
			}
		}
	}

	.name{
		display: -webkit-inline-box;
		width: 60%;
		overflow: hidden;
		text-overflow:ellipsis;
		-webkit-box-orient: vertical;  
		-webkit-line-clamp: 1; //显示几行
	}
	
	.city{
		float: right;
	}
	
	 .list-content {
	    background-color: #F4F4F4;
	  }
	
	  .list-item {
	    height: 100rpx;
	    line-height: 100rpx;
	    text-align: center;
	    margin: 4rpx 0;
	    background-color: #FFFFFF;
	  }
	

</style>